<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 150px;
            height: 250px;
        }
        #imglist img.selected{
            border: 150px;
            width: 140px;
            height: 240px;
        }
    </style>
    <script src="./jquery-3.3.1.min.js"></script>
    <!-- <script src="./jquery-3.3.1.min.js"></script> -->


</head>
<body>
     <h1>JQ文档操作</h1>

    <button>append</button>
    <button>appendTo</button>
    <button>prepend</button>

    <button>after</button>
    <button>inserAfter</button>
    <button>before</button>

    <button>wrap</button>
    <button>wrapAll</button>

    <button>replaceWith</button>
    <button>replaceAll</button>

    <button>remove</button>
    <button>empty</button>

    <hr>

    <div id="imglist">
        <img src="./imgs/pikaq1.jpg">
        <img src="./imgs/pikaq2.jpg">
        <img src="./imgs/pikaq3.jpg">
        <img src="./imgs/pikaq4.jpg">
        <img src="./imgs/pikaq5.jpg">
    </div>

    <hr>
    <p>口袋妖怪是日本任天堂出品的掌上游戏</p>

    <script>
        $('button').click(function(){
            创建 img 对象
            // var img = '<img src="./imgs/pikaq1.jpg" width="200" id="myimg">';
            // console.log($('<img src="./imgs/pikaq.jpg">'));
            var img = $('<img src="./imgs/pikaq5.jpg">')

            switch ($(this).html()){
                case 'append':$('#imglist').append(img);break;
                case 'appendTo': img.appendTo('#imglist');break;
                case 'prepend': $('#imglist').prepend(img);break;

                case 'after':$('#imglist').after(img);break;
                case 'inserAfter': $(img).insertAfter('#imglist');break;
                case 'before': $('#imglist').before(img);break;

                case 'wrap': $('#imglist').wrap('<li>');break;
                case 'wrapAll': $('#imglist').wrapAll('<li>');break;

                // case 'replaceWith': $('#imglist img.selected').replaceWith(img);break;
                // case 'replaceAll': img.replaceAll('#imglist img.selected');break;

                case 'replaceWith': $('#imglist img').replaceWith(img);break;
                case 'replaceAll': img.replaceAll('#imglist img');break;

                case 'remove': $('#imglist img').replaceWith(img);break;
                case 'empty': $('#imglist').empty();break;
            }
        })

        $('p').warpInner('<b>');

        // 选中效果,只允许选一张
        $('#imglist img').click(function(){
            $(this).addClass('selected')
            .siblings('img').removeClass('selected');
        })
    </script>
</body>
</html>